<template>
	<view style="display: flex;flex-direction: column;">
		<view id="headerContainer">
			<view class="search-container">
				<uni-search-bar :radius="100" placeholder="请输入手机号" style="width:100%;" @confirm="searchValueConfirmHandle"></uni-search-bar>
			</view>
			<view class="tab-container">
				<view class="tab-box" v-for="(item, index) in tabTitle" :key="index">
					<view :class="'tab'+ ((currentTab === index) ? ' tab-active':'')" :data-index=index @click="tabChangeHandle">{{ item }}</view>
				</view>
			</view>
		</view>
		<scroll-view class="order-list-container" >
			<block v-for="(order, index) in orderList" :key="index">
				<view class="order-box" :data-id="order.id" :data-order-no="order.orderNo" :data-shop-id="order.shopId" :data-orderstep="order.orderStep" @click="clickOrderHandle" >
					<view class="order-container">
						<image class="shop-logo" mode="aspectFill" :src="order.shopImage"></image>
						<view class="order-info">
							<view class="order-info-box">
								<view class="order-name">{{order.orderName}}</view>
								<view class="order-statu">{{order.orderStepText}}</view>
							</view>
							<view class="order-info-box">
								<view v-if="order.payPrice != null" class="order-price">￥{{order.payPrice}}</view>
								<view v-if="order.payPrice == null" class="order-price">未报价</view>
							</view>
						</view>
					</view>
					<view class="split-outbox">
						<view class="split-inline"></view>
					</view>
					<view class="order-footer">
						<view class="order-no">订单号:{{order.orderNo}}</view>
						<view v-if="order.createDatetime != null" class="order-time">{{order.createDatetime}}</view>
					</view>
				</view>
			</block>
		</scroll-view>
	
		<view id="footerBox" class="footer-box"></view>
	</view>
</template>

<script>
	import {uniSearchBar} from '@dcloudio/uni-ui'
	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
				currentTab: 0,
				searchValue: '',
				orderLastTime: 0,
				orderPager: {
					currentPage: 0,
					pageSize: 100,
					count: 0,
					totalPage: 1
				},
				orderList: [],
				tabTitle: ['全部', '预约', '维修', '完成']
			}
		},
		mounted(option) {
			this.initOrderList()
		},
		methods: {
			// 初始化列表
			initOrderList(){
				this.$login.checkTokenValidity().then(res => {
						this.orderLastTime = new Date().getTime()
						this.orderList = []
						this.loadingOrders()
					})
			},
			searchValueConfirmHandle(event) {	
				this.$login.checkTokenValidity().then(res => {
						this.searchValue = event.value
						this.currentTab = 4
						this.orderList = []
						this.orderLastTime = new Date().getTime()
						this.loadingOrders()
					})
			},
			// 请求订单数据
			loadingOrders() {
				let queryUrl = this.currentTab === 4 ? "/api/order/searchOrder" : "/api/order/orders"
				this.$api.apiGet({
					url: queryUrl,
					data: {
						searchValue: this.searchValue,
						orderListType: this.currentTab,
						orderLastTime: this.orderLastTime
					},
				}).then((res) => {
					this.orderList = res.data.data
				}).catch((res) => {
					this.$msg.showMessage("请求失败！")
				})
			},
			tabChangeHandle(event){
				this.$login.checkTokenValidity().then(() => {
						this.currentTab = event.currentTarget.dataset.index
						this.orderLastTime = new Date().getTime();
						this.orderList = []
						this.loadingOrders()
					})
			},
			// 点击订单跳转
			clickOrderHandle (event) {
				const { id, orderNO, orderStep, shopId } = event.currentTarget.dataset
				uni.navigateTo({
					url: `/pages/order/order-info/order-info?orderId=${id}&shopId=${shopId}&orderNo=${orderNo}&orderStep=${orderStep}`
				})
			}
		}
	}
</script>

<style>
	.search-container{
		display: flex;
		justify-content: center;
		align-items: center;
		padding:30rpx 0 0 0;
		background-color:#fff;
	}
	.search-icon{
		font-size:28rpx;
		display: inline-block;
	}
	.search-box{
		height: 72rpx;
		line-height: 72rpx;
		width: 510rpx;
		margin: auto;
		border-radius: 60rpx;
		border: 1rpx solid #f6f6f6;
		background-color:#f5f5f5;
		padding:0 30rpx;
		font-size:28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.search-input{
		width: 450rpx;
		margin-left: 10rpx;
	}
	.tab-container{
		background-color: #fff;
	}
	.tab-box{
		width: 640rpx;
		margin:auto;
	}
	.tab{
		width: 70rpx;
		height: 28rpx;
		line-height: 28rpx;
		padding: 24rpx 40rpx;
		text-align: center;
		font-size:32rpx;
		margin:0 5rpx;
		display: inline-block;
	}
	.tab-active{
		color:#009245;
		border-bottom:4rpx solid #009245;
	}
	.order-box{
		position: relative;
	}
	.new-notice{
		position: absolute;
		transform: rotate(180deg);
		right: -4rpx;
		top: 16rpx;
		width: 40rpx !important;
		height: 40rpx !important;
		z-index:1;
	}
	.order-list-container{
		min-height: 280rpx;
	}
	.order-container{
		height: 150rpx;
		background-color: #fff;
		position:relative;
		top: 20rpx;
		margin-bottom: 10rpx;
		display: flex;
	}
	.shop-logo{
		height: 100rpx;
		width: 100rpx;
		margin: 25rpx 30rpx 25rpx 40rpx;
		display: inline-block;
		float: left;
	}
	.order-info{
		display: inline-block;
		float: left;
		width: 500rpx;
		margin: 20rpx 0;
		flex: 1;
		padding-right: 40rpx;
	}
	.order-info-box{
		height: 56rpx;
		line-height: 56rpx;
	}
	.order-name,.order-statu{
		font-size: 32rpx;
		display: inline-block;
	}
	.order-name{
		float: left;
		max-width: 300rpx;
	}
	.order-statu{
		float: right;
		color:#009245;
		height: 56rpx;
		line-height: 56rpx;
		max-width: 200rpx;
	}
	.order-price{
		display: inline-block;
	}
	.order-price{
		
		font-size: 28rpx;
		float: left;
		max-width: 200rpx;
	}
	.split-outbox{
		padding: 0 40rpx;
		background-color: #fff;
	}
	.split-inline{
		height: 12rpx;
		border-bottom: 1rpx solid #eee;
	}
	.order-footer{
		display: flex;
		background-color: #fff;
		padding: 0 40rpx;
	}
	.order-no{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		flex: 1;
	}
	.order-time{
		font-size: 24rpx;
		float: right;
		height: 80rpx;
		line-height: 80rpx;
		max-width: 300rpx;
		text-align: right;
	}
	.loading-tip{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		text-align: center;
		color: #C0C0C0;
	}
	.footer-box{
		height: 110rpx;
	}
</style>
